<template>
  <div>
    <div class="btn">
      <el-button icon="el-icon-edit" size="medium" @click="dialogVisible = true">手动画布查询</el-button>
    </div>
    <!-- <el-button icon="el-icon-d-arrow-right" size="mini" @click="dialogVisible = true">详情</el-button> -->
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <vue-esign style="border: 2px solid #666" ref="esign" :width="500" :height="300" :isCrop="isCrop" />
      <div class="btns">
        <el-button icon="el-icon-search" @click="handleGenerate">开始查询</el-button>
        <el-button icon="el-icon-delete" @click="handleReset">清空</el-button>
        <el-button icon="el-icon-delete" @click="handleReset2">清空</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "myCanvas",
  data() {
    return {
      dialogVisible: false,
      isCrop: true,
      userInput: {
        // 用户input框输入
        querytext: "",
        // 用户勾选的Type数组
        searchitems: [],
        // 用户是否精确查询
        exactMatch: false,
        // 用户上传图片的base64编码
        Word: "",
      },
    };
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset();
    },
    // 生成图片
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          this.dialogVisible = false;
          this.userInput.Word = res.slice(22);
          this.$emit("change", this.userInput.Word);
          this.handleReset();
          // this.getSearchData()
        })
        .catch((err) => {
          alert(err);
        });
    },
    // async getSearchData() {
    //     // console.log('发送请求了', JSON.stringify(this.userInput))
    //     const res = await this.$http.post('api/retrieval', JSON.stringify(this.userInput))
    //     console.log(res)
    //     this.publish = res.data
    //     console.log(this.publish)
    // },
  },
};
</script>

<style lang="scss" scoped>
.btns {
  margin: 20px;
}
</style>
